<template>
<div>
      <h1 v-text="msg" ref="title"></h1>
      <button @click="showDom">点我输出上方的DOM元素</button>
      <School ref='school'/> 
      <Student  /> 
</div>
   
</template>

<script>
// 引入SchooL组件
import School from './components/School'
import Student from './components/Student'
export default {
    name:'App',
     components:{
        School,
        Student
    },
    data() {
        return {
            msg:'欢迎学习Vue!'
        }
    },
    methods: {
        showDom(){
            // ref id 替代者可以拿到DOM元素和组件实例
            // console.log(this.$refs.title);
            console.log(this.$refs.school);
        }
    },
}
</script>

<style>

</style>